<template>
  <!-- 排行榜 -->
  <div class="g-bg3 overtext" :style="page_flag">
    <!-- 左侧 -->
    <div class="g-sd" >
      <div class="n-minelst">
        <h2 class="">云音乐特色榜</h2>
        <ul>
          <li
            v-for="el in toplist4"
            :key="el.id"
            :class="el.id == list_id ? 'z-bg' : ''"
            @mousedown="list_m(el.id)"
          >
            <div class="item clearfix">
              <div class="left-p">
                <a href="javascript:;" class="avatar">
                  <img :src="el.coverImgUrl + '?param=40y40'" />
                </a>
              </div>
              <p class="name">
                <a href="javascript:;">{{ el.name }}</a>
              </p>
              <p class="s-fc4">{{ el.updateFrequency }}</p>
            </div>
          </li>
        </ul>
        <h2 class="scd">全球媒体榜</h2>
        <ul>
          <li
            v-for="el in toplist"
            :key="el.id"
            :class="el.id == list_id ? 'z-bg' : ''"
            @mousedown="list_m(el.id)"
          >
            <div class="item clearfix">
              <div class="left-p">
                <a href="javascript:;" class="avatar">
                  <img :src="el.coverImgUrl + '?param=40y40'" />
                </a>
              </div>
              <p class="name">
                <a href="javascript:;">{{ el.name }}</a>
              </p>
              <p class="s-fc4">{{ el.updateFrequency }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="g-mn3">
      <!-- head  -->
      <div class="g-wrap clearfix">
        <div class="cover">
          <img :src="list_data.coverImgUrl + '?param=150y150'" />
          <span class="msk"></span>
        </div>
        <div class="cnt">
          <div class="cntc">
            <div class="hd">
              <h2 class="f-ff2">{{page_data.playlist.name}}</h2>
            </div>
            <div class="user">
              <i class="u-icn"></i>
              <span class="sep">最近更新：{{updateTime}}</span>
              <span class="s-fc4">（{{ list_data.updateFrequency }}）</span>
            </div>
            <PageFns :sub="page_data" :mdata="music" />
          </div>
        </div>
      </div>
      <!-- body -->
      <div class="g-wrap12">
        <div class="u-title">
          <h3>
            <span>歌曲列表</span>
          </h3>
          <span class="sub s-fc3"
            ><span>{{ list_data.trackCount }}</span
            >首歌</span
          >
          <div class="count s-fc3">
            播放：<strong class="s-fc6">{{ list_data.playCount }}</strong
            >次
          </div>
        </div>
        <table class="m-table">
          <thead>
            <tr>
              <th class="w1"></th>
              <th>
                <div class="wp">标题</div>
              </th>
              <th class="w2">
                <div class="wp">时长</div>
              </th>
              <th class="w3">
                <div class="wp">歌手</div>
              </th>
            </tr>
          </thead>
          <tbody @mouseleave="show_flag(0)">
            <tr
              v-for="(el, index) in music3"
              :key="el.id"
              @mouseenter="show_flag(index + 1)"
            >
              <td class="hd1">
                <span class="num">{{ index + 1 }}</span>
                <!-- <div class="rk">
                                    <span class="u-icn-1"></span>
                                </div> -->
              </td>
              <td class="rank">
                <div class="f-cb">
                  <div class="tt">
                    <a href="javascript:;">
                      <img
                        :src="el.al.picUrl + '?param=50y50&quality=100'"
                        class="rpic"
                      />
                    </a>
                    <span class="play" @mousedown="play_m(index)">&nbsp;</span>
                    <div class="ttc">
                      <span class="txt overtext">
                          <router-link :to="{
                            path:'/song',
                             query:{
                                 id:el.id
                             }
                        }"> {{ el.name }}</router-link>
                           
                                   <span v-if="el.alia.length" class="s-fc8"> - ({{ el.alia[0] }})</span>
                         
                       
                    
                          
                      </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="s-fc3">
                <span class="u-dur" v-show="index + 1 != fn_flag">{{
                  el.dt | formatTime
                }}</span>
                <div class="opt" v-show="index + 1 == fn_flag">
                  <Fns />
                </div>
              </td>
              <td>
                <div class="text overtext">
                  <span>
                    <a href="javascript:;">{{ el.ar[0].name }}</a>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              v-for="(el, index) in musics"
              :key="el.id"
              @mouseenter="show_flag(index + 4)"
            >
              <td class="hd1">
                <span class="num num1">{{ index + 4 }}</span>
                <!-- <div class="rk">
                                    <span class="u-icn-1"></span>
                                </div> -->
              </td>
              <td>
                <div class="f-cb">
                  <div class="tt">
                    <span class="play1" @mousedown="play_m(index + 3)"
                      >&nbsp;</span
                    >
                    <div class="ttc overtext">
                      <span class="txt1">
                     
                        <router-link :to="{
                            path:'/song',
                             query:{
                                 id:el.id
                             }
                        }"> {{ el.name }}</router-link>
                        <span v-if="el.alia.length" class="s-fc8"
                          > - ({{ el.alia[0] }})</span
                        >
                      </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="s-fc3">
                <span class="u-dur" v-show="index + 4 != fn_flag">{{
                  el.dt | formatTime
                }}</span>
                <div class="opt" v-show="index + 4 == fn_flag">
                  <Fns :song="music[index + 3]" />
                </div>
              </td>
              <td>
                <div class="text overtext">
                  <span>
                    <a href="javascript:;">{{ el.ar[0].name }}</a>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <CommentArea />
      </div>
    </div>
  </div>
</template>

<script>
import PageFns from "../components/PageFns.vue";
import Fns from "../components/Fns.vue";
import CommentArea from "../components/CommentArea.vue";
import axios from "axios";
export default {
  name: "RankingList",
  data() {
    return {
      toplist4: [],
      toplist: [],
      list: [],
      list_num: 0,
      list_data: "",
      music3: [],
      musics: [],
      music: [],
      fn_flag: 0,
      list_id: "",
      updateTime: "",
      page_flag:{
        visibility:'hidden'
      },
      page_data:{
         playlist:''
      },
     
    };
  },
  components: {
    PageFns,
    Fns,
    CommentArea,
  },


  mounted() {
    
    axios.get("http://localhost:8080/api/toplist").then((response) => {
      this.toplist4 = response.data.list.slice(0, 4);
      this.toplist = response.data.list.slice(4, 99);
      this.list = response.data.list;
      
      this.page_flag.visibility = 'visible';
       
      if (this.$route.query.id) {
        this.list_id = this.$route.query.id;
      } else {
        this.list_id = this.list[0].id;
      }
       this.$nextTick(function(){
         axios
        .get("http://localhost:8080/api/playlist/detail", {
          params: {
            id: this.list_id,
          },
        })
        .then(
          (response) => {
            this.page_data = response.data
           
            this.music = response.data.playlist.tracks;
            
            this.$bus.$emit(
                  "comment",
                  this.list_id,
                  "/comment/playlist",
                  2
                );
           
            let date = new Date(response.data.playlist.updateTime);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let date1 = new Date();
            let year1 = date1.getFullYear();
            if (year == year1) {
              
              this.updateTime = month + "月" + day + "日";
            } else {
             this.updateTime = year + "年" + month + "月" + day + "日 ";
            }
            
          
            this.music3 = response.data.playlist.tracks.slice(0, 3);
            this.musics = response.data.playlist.tracks.slice(3, 100);
         
               
            
          },
          () => {
            this.list_id = response.data.list[0].id;
            axios
              .get("http://localhost:8080/api//playlist/detail", {
                params: {
                  id: this.list_id,
                },
              })
              .then((response) => {
                
                this.music = response.data.playlist.tracks;
                this.music3 = response.data.playlist.tracks.slice(0, 3);
                this.musics = response.data.playlist.tracks.slice(3, 100);
                this.$bus.$emit(
                  "comment",
                  this.list_id,
                  "/comment/playlist",
                  2
                );
                this.updateTime = response.data.playlist.updateTime;
              });
          }
        );
       })
    });
  },
  

  methods: {
    show_flag(index) {
      this.fn_flag = index;
    },
    list_m(index) {
      
       if (this.$route.query.id != index) {
           this.list_num = index;
      this.$router.push({
        path: "/discover/toplist",
        query: {
          id: index,
        },
      });
       }
     
    },
    play_m(index) {
      this.$bus.$emit("musicList", this.music[index]);
    },
  },

  watch: {
    $route() {
    
        axios.get('http://localhost:8080/api//playlist/detail',{
          params:{
            id:this.$route.query.id
          }
        }).then((response) => {
              this.page_flag.visibility = 'hidden'
             setTimeout( () => {
                 this.page_data = response.data;
               this.music = response.data.playlist.tracks;
               this.list_id = this.$route.query.id
            this.$bus.$emit(
                  "comment",
                  this.list_id,
                  "/comment/playlist",
                  2
                );
           
            let date = new Date(response.data.playlist.updateTime);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let date1 = new Date();
            let year1 = date1.getFullYear();
            if (year == year1) {
              
              this.updateTime = month + "月" + day + "日";
            } else {
             this.updateTime = year + "年" + month + "月" + day + "日 ";
            }
            
          
            this.music3 = response.data.playlist.tracks.slice(0, 3);
            this.musics = response.data.playlist.tracks.slice(3, 100);
             this.$nextTick( () => {
               this.page_flag.visibility = 'visible'
             })
             },200)
        }, () => {
               axios.get('http://localhost:8080/api/playlist/detail',{
          params:{
            id:this.list[0].id
          }
        }).then((response) => {
              this.page_flag.visibility = 'hidden'
             setTimeout( () => {
                 this.page_data = response.data;
               this.music = response.data.playlist.tracks;
               this.list_id = this.list[0].id;
            this.$bus.$emit(
                  "comment",
                  this.list_id,
                  "/comment/playlist",
                  2
                );
           
            let date = new Date(response.data.playlist.updateTime);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let date1 = new Date();
            let year1 = date1.getFullYear();
            if (year == year1) {
              
              this.updateTime = month + "月" + day + "日";
            } else {
             this.updateTime = year + "年" + month + "月" + day + "日 ";
            }
            
          
            this.music3 = response.data.playlist.tracks.slice(0, 3);
            this.musics = response.data.playlist.tracks.slice(3, 100);
             this.$nextTick( () => {
               this.page_flag.visibility = 'visible'
             })
             },200)
        }, 
           
        )
        }
           
        )
          
    },
    list_id(index) {
      this.list.forEach((el) => {
        if (el.id == index) {
          this.list_data = el;
        }
      });
    },
  },
 

};
</script>

<style scoped lang='less'>
.g-bg3 {
  width: 980px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  height: auto;
  min-height: 700px;
  background: url(../images/wrap3.png) repeat-y center 0;
  text-align: left;
  
}
.g-sd {
  float: left;
  width: 240px;
}
.n-minelst {
  margin-top: 40px;
  h2 {
    padding: 0 10px 12px 15px;
    font-size: 14px;
    color: #000;
    text-align: left;
    font-family: simsun, \5b8b\4f53;
  }
  li {
    position: relative;
    padding: 10px 0 10px 20px;
    height: 42px;
    cursor: pointer;
    &:hover {
      background-color: #f4f2f2;
    }
  }
  .z-bg {
    background: #e6e6e6;
    &:hover {
      background: #e6e6e6;
    }
  }
  .left-p {
    float: left;
    margin-left: -50px;
    overflow: hidden;
    width: 40px;
  }
  .item {
    padding-left: 50px;
  }
  .avatar {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    img {
      width: 40px;
      height: 40px;
    }
  }
  p {
    text-align: left;
  }
  .name {
    width: 150px;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 8px;

    a {
      white-space: nowrap;
      color: #000;
      text-decoration: none;
    }
  }
}
.s-fc4 {
  color: #999;
}
.scd {
  margin-top: 20px;
}
.g-mn3 {
  height: 100%;
  float: right;
  width: 740px;
  padding-bottom: 50px;
  .cover {
    float: left;
    position: relative;
    margin: 0 -220px 0 0;
    padding: 3px;
    border: 1px solid #ccc;
    width: 150px;
    height: 150px;
    img {
      width: 150px;
      height: 150px;
    }
    .msk {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 150px;
      height: 150px;
      background: url(../images/coverall.png) no-repeat -230px -380px;
    }
  }
  .user {
    margin: 0 0 20px;
    line-height: 35px;
    .u-icn {
      float: left;
      margin: 9px 0 0 3px;
      width: 13px;
      height: 13px;
      background: url(../images/icon.png) no-repeat -18px -682px;
    }
  }
  .sep {
    margin-left: 5px;
  }
}
.g-wrap {
  padding: 40px;
}
.cnt {
  float: right;
  width: 100%;
}
.cntc {
  margin-left: 187px;
}
.hd {
  margin: 16px 0 4px;
  position: relative;
  line-height: 24px;
  h2 {
    line-height: 24px;
    font-size: 20px;
    font-weight: normal;
    text-align: left;
  }
}
.g-wrap12 {
  padding: 0 30px 40px 40px;
}

.u-title {
  height: 33px;
  border-bottom: 2px solid #c20c20;
  h3 {
    float: left;
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
  }
  .sub {
    margin: 9px 0 0 20px;
    float: left;
  }
}
.s-fc3 {
  color: #666;
}
.s-fc6 {
  color: #c20c20;
}
.count {
  float: right;
  margin-top: 5px;
}
.m-table {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  th {
    height: 38px;
    background-color: #f7f7f7;
    background: url(../images/table.png) repeat-x 0 0;
    text-align: left;
    color: #666;
    font-weight: normal;
    .wp {
      height: 18px;
      line-height: 18px;
      padding: 8px 10px;
      background: url(../images/table.png) no-repeat 0 -56px;
    }
  }
  td {
    padding: 6px 10px;
    line-height: 18px;
    text-align: left;
  }
  tt {
    float: left;
    width: 100%;
    a {
      display: inline-block;
    }
  }
  .rank {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.w1 {
  width: 77px;
}
.w2 {
  width: 91px;
}
.w3 {
  width: 26%;
}
.hd1 {
  height: 18px;
}
.num {
  float: left;
  width: 25px;
  margin-left: 0;
  text-align: center;
}
.rk {
  float: right;
  width: 32px;
  margin-right: -5px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
.u-icn-1 {
  float: left;
  margin: 0 auto;
  width: 16px;
  height: 17px;
  background: url(../images/icon.png) no-repeat -67px -283px;
}

.rpic {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 14px;
}
.play {
  margin-top: 17px;
  margin: 17px 8px 0 0;
  float: left;
  width: 17px;
  height: 17px;
  cursor: pointer;
  background: url(../images/table.png) no-repeat 0 -103px;
  &:hover {
    background: url(../images/table.png) no-repeat 0 -128px;
  }
}
.ttc {
  vertical-align: middle;
}

.txt {
  max-width: 67%;
  position: relative;
  display: inline-block;
  margin-right: -25px;
  padding-right: 25px;
  height: 20px;
  margin-top: 17px;
}
.u-dur {
  line-height: 18px;
  text-align: left;
}
.text {
  width: 100%;
  position: relative;
}
.play1 {
  margin-right: 8px;
  float: left;
  width: 17px;
  height: 17px;
  cursor: pointer;
  background: url(../images/table.png) no-repeat 0 -103px;
  &:hover {
    background: url(../images/table.png) no-repeat 0 -128px;
  }
}
.num1 {
  font-size: 12px;
}
.opt {
  margin-right: -20px;
  float: left;
}
tbody {
  tr {
    &:nth-child(2n + 1) {
      background: #f7f7f7;
    }
  }
}
.s-fc8 {
  color: #aeaeae;
}
</style>